<template>
<div class="content" v-if="settings.isHeaderShow">
    <div>
        <div @click="goBack" v-if="settings.isGoBackShow">
            <van-icon name="arrow-left" size="20" />
        </div>
        <div @click="showDrawer" v-else>
            <van-icon name="bars" size="20" />
        </div>
    </div>
    <div>
        <span>{{ route.meta.title || '' }}</span>
    </div>
    <div>
        <div v-if="settings.themeVal == 'light'" @click="changeBackgroundColorDark" >
            <SvgIcon width="20px" height="20px" name="moon" color="#808080"></SvgIcon>
        </div>
        <div v-if="settings.themeVal == 'dark'" @click="changeBackgroundColorNormal">
            <SvgIcon width="20px" height="20px" name="sun" color="#fff"></SvgIcon>
        </div>
    </div>
    <van-popup
        v-model:show="settings.isDrawerShow"
        position="left"
        :style="{ width: '80%', height: '100%' }"
    >
        <div class="popupBox">
            <div class="popupTop">
                <div class="popupTopImg">
                    <img src="@/assets/img/userImg.png" alt="">
                </div>
                <div class="popupTopText">
                    <p>{{ 'Hello' }}</p>
                    <p>{{  }}</p>
                </div>
            </div>
            <div class="popupMain">
                <div class="popupBoxItem" v-for="(item, index) in popupBoxItem" :key="item.id" @click="goPopupBoxItem(item)" v-show="popupBoxItem.length">
                    <SvgIcon width="20px" height="20px" :name="item.icon" color="#bca1f3"></SvgIcon>
                    <div class="popupBoxItemText">
                        <p>{{ item.title }}</p>
                    </div>
                </div>
            </div>
            <div class="popupBottom">
                <div class="popupBoxItem" @click="quitLogin" v-if="settings.isLogin">
                    <SvgIcon width="20px" height="20px" name="quit" color="#bca1f3"></SvgIcon>
                    <div class="popupBoxItemText">
                        <p>退出</p>
                    </div>
                </div>
            </div>
        </div>
    </van-popup>
</div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast, showConfirmDialog } from 'vant'
import useSettingStore from '@/store/modules/setting'
import menuStore from '@/store/modules/menuDataList'
const settings = useSettingStore()
const menuStoreList = menuStore()


const route = useRoute()
const router = useRouter()


const showDrawer = () => {
    settings.handlerSetTurnButtonVal(true)
}

const goBack = () => {
    router.go(-1)
}

const isDark = ref(false)

const popupBoxItem = ref<any>([
    {
        id: '99',
        title: '更多',
        icon: 'more',
        path: '',
    }
])

const goPopupBoxItem = (item: any) => {
    if (item.id == '0') {
        return false
    }
    if (item.path == '') {
        showToast('功能开发中，敬请期待！')
    }
    settings.handlerSetTurnButtonVal(false)
    router.push({
        path: item.path,
        query: {
            // title: item.title
        }
    })
}

const quitLogin = () => {
    showConfirmDialog({
            title: '',
            confirmButtonColor: '#bca1f3',
            message: '确定要退出登录吗？',
        })
        .then(() => {
            sessionStorage.clear()
            settings.handlerSetIsLogin(false)
            router.push('/login')
            // settings.handlerSetActive(1)
        })
        .catch(() => {
            // on cancel
    });
}

const changeBackgroundColorDark = (event: any) => {
    settings.handlerSetThemeVal('dark') // vant
    document.documentElement.classList.remove("dark");
    isDark.value = false;
    switchBtn(event)
}
const changeBackgroundColorNormal = (event: any) => {
    document.documentElement.classList.add("dark");
    isDark.value = true
    switchBtn(event)
    setTimeout(() => {
        settings.handlerSetThemeVal('light') // vant
    }, 300)
}

// 切换主题动画
async function switchBtn(e) {
    const { clientX: x, clientY: y } = e

    const clipPath = [
        `circle(0px at ${x}px ${y}px)`,
        `circle(${Math.hypot(
            Math.max(x, innerWidth - x),
            Math.max(y, innerHeight - y),
        )}px at ${x}px ${y}px)`,
    ]

    await document.startViewTransition(async () => {
        isDark.value = !isDark.value
        document.documentElement.classList.toggle('dark')
        await nextTick()
    }).ready

    document.documentElement.animate(
        { clipPath: isDark.value ? clipPath.reverse() : clipPath },
        {
        duration: 300,
        easing: 'ease-in',
        pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
        },
    )
}

watch(() => {isDark.value}, () => {
    if (isDark.value == true) {
        settings.themeVal = 'dark'
    } else if (isDark.value == false) {
        settings.themeVal = 'light'
    }
})


onMounted(() => {
    console.log(route)
    if (menuStoreList.popupBoxDataList && menuStoreList.popupBoxDataList.length) {
        popupBoxItem.value = menuStoreList.popupBoxDataList
    }
})

</script>


<style lang="scss" scoped>
.content {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: var(--background);
    box-sizing: border-box;
    border-bottom: 0.5px solid #e5e7eb;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    overflow: hidden;
    z-index: 1000;
    .popupBox {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 20px;
        box-sizing: border-box;
        .popupBoxItem {
            width: 100%;
            min-height: 50px;
            height: 50px;
            margin-left: 5px;
            margin-bottom: 15px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .popupBoxItemText {
                margin-left: 35px;
                display: flex;
                flex-direction: row;
                align-items: center;
                p {
                    font-size: 14px;
                    font-weight: 500;
                }
            }
        }
        .popupTop {
            width: 100%;
            height: 25%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .popupTopImg {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                border: 4px solid #e5e7eb;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .popupTopText {
                margin-top: 10px;
                p {
                    font-size: 20px;
                    font-weight: 700;
                    color: #15256a;
                }
            }
        }
        .popupMain {
            width: 100%;
            height: 65%;
            overflow-y: scroll;
            margin-top: 20px;
        }
        .popupBottom {
            width: 100%;
            height: 10%;
            display: flex;
        }
    }
}
</style>